<template lang="pug">
  .filterkey
    .edit
      el-button(@click="addkey()") 添加过滤关键词
    table
      tr
        th(v-for = "(v,i) in names" :key="i") {{v}}
      tr(v-for = "(v,i) in list" :key="i")
        td {{v.name}}
        td {{v.keywordList}}
        td {{v.filterCycleStart.slice(0,19)}} — {{v.filterCycleEnd.slice(0,19)}}
        td
          el-button( @click="updateFilter(v)") 编辑
          el-button.del( @click = "delfilter(v)") 删除
    //- 弹框
    el-dialog(size="tiny" custom-class="test" :title="update == false ?'添加关键词' : '修改关键词'" :visible.sync="dialogVisible")
      el-form(ref="form" :model="form" label-width="100px" :rules ="rules")
        el-form-item(label="关键词名称" placeholder="请输入关键词名称" prop="name")
          el-input(v-model="form.name")
        el-form-item(label="过滤周期" required)
          el-col(:span="11")
            el-form-item(prop="date1")
              el-date-picker( type="datetime" placeholder="选择日期时间" v-model="form.date1" style="width: 100%;")
          el-col(class="line" :span="2") 
            .bar
          el-col(:span="11")
            el-form-item(prop="date2")
              el-date-picker( type="datetime" placeholder="选择日期时间" v-model="form.date2" style="width: 100%;")
        el-form-item(label="关键词组" placeholder="请输入关键词名称" prop="keywordList")
          el-input(v-model="form.keywordList")
      div(slot="footer" class="dialog-footer")
        el-button(@click = "cancl()") 取消
        el-button(type="primary" @click="submitForm('form')" ) {{update == false ?'确 定' : '修改'}}
        
</template>
<script>
import moment from 'moment'
let names = ['关键词名称','过滤词组','过滤周期','操作'];
export default {
  name:'filterkey',
  data(){
    return{
      names,
      list:[],
      dialogVisible:false,
      update:false,
      updateId:'',
      form: {
        name: '',
        date1: '',
        date2: '',
        keywordList:''
      },
      rules: {
        name: [
          { required: true, message: '请输入关键词名称', trigger: 'blur' },
          { min: 0, max: 10, message: '长度在10个字符以内', trigger: 'blur' }

        ],
        keywordList: [
          { required: true, message: '请输入关键词组', trigger: 'blur' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
      }
    }
  },
  mounted(){
    this.getfilter()
  },
  methods:{
    rest(){
      if (this.$refs['form']!==undefined) {
        this.$refs['form'].resetFields();
      }
      this.form.name = ''
      this.form.date1 = ''
      this.form.date2 = ''
      this.form.keywordList = ''
    },
    addkey(){
      this.dialogVisible = true
      this.rest()
      this.update = false
    },
    cancl(){
      this.rest()
      this.dialogVisible = false
    },
    async getfilter(){
      let res = await this.$http.post('/vrv-monitor-platform-web/filterKeyword/queryFilterKeywordByOrgCode',{pageNum:1,pageSize:100})
      this.list = res.body.data || []
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false
          if(this.update){
            this.updatefiltergb()
          }else{
            this.addfilter()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async addfilter(){
      
      let res = await this.$http.post('/vrv-monitor-platform-web/filterKeyword/insert',{
        name:this.form.name,
        filterCycleStart:moment(this.form.date1).format('YYYY-MM-DD HH:mm:ss'),
        filterCycleEnd:moment(this.form.date2).format('YYYY-MM-DD HH:mm:ss'),
        keywordList:this.form.keywordList
      })
      if(res.body.success == true){
        this.$message.success('添加成功')
        this.getfilter()
      }else{
        this.$message.error(res.body.message)
      }
    },
    updateFilter(d){
      this.dialogVisible = true
      this.update = true
      this.updateId = d.id
      this.form.name = d.name
      this.form.date1 = new Date(moment(d.filterCycleStart))
      this.form.date2 = new Date(moment(d.filterCycleEnd))
      this.form.keywordList = d.keywordList
    },
    async updatefiltergb(){
      let res = await this.$http.post('/vrv-monitor-platform-web/filterKeyword/update',{
        id:this.updateId,
        name:this.form.name,
        filterCycleStart:moment(this.form.date1).format('YYYY-MM-DD HH:mm:ss'),
        filterCycleEnd:moment(this.form.date2).format('YYYY-MM-DD HH:mm:ss'),
        keywordList:this.form.keywordList
      })
      if(res.body.success == true){
        this.$message.success('修改成功')
        this.getfilter()
      }else{
        this.$message.error(res.body.message)
      }
    },
    delfilter(d){
      this.$confirm('此操作将永久删除该关键词, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let res = await this.$http.post('vrv-monitor-platform-web/filterKeyword/delete',{id:d.id})
            if(res.body.success == true){
              this.$message.success('删除成功')
              this.getfilter()
            }else{
              this.$message.error(res.body.message)
            } 
          }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
      
    }
  }
}
</script>
<style lang="stylus">
.test
  .el-dialog__title 
    color #666666
    font-size 18px
    font-weight normal
  .el-form-item__label
    color #7d7d7d
  .bar
    width 15px
    height 3px
    background-color #898989
    margin 0 auto
    margin-top 16px
</style>

<style lang="stylus" scoped>
  .filterkey
    .edit
      height 60px
      padding 0 30px
      .el-button
        margin-top 12px
        color #707070
        &:hover 
          color #20a0ff
    table  
      width 100%
      border-collapse collapse
      tr
        &:last-child
          td
            border-bottom 1px solid #dcdcdc  
        th  
          height 60px
          border-top 1px solid #dcdcdc
          font-size 14px
          color #535353
          font-weight normal
        td
          height 60px
          border-top 1px solid #dcdcdc
          text-align center
          font-size 14px
          color #535353


</style>

